<template>
  <div class="filter_box">
    <nut-popup v-model:visible="props.isPopup" position="right" style="width: 80%; height: 100%" @click-overlay="closedOverlay">
      <div class="game_title">
        <!-- <img src="/imgs/club/game.png" alt=""> -->
        <span>{{isType === 1 ? '德州筛选' : '跑得快筛选' }}</span>
      </div>
      <div class="body vertical center body_sec">
        <nut-form label-position="top" ref="formRef" class="">
          <template v-if="isType === 1">
            <!-- 盲注 -->
            <!-- <nut-form-item class="yh_item" label="盲注">
              <nut-input
                v-model.trim="form.amount"
                placeholder="最小盲注金额"
              />
              <span>至</span>
              <nut-input
                v-model.trim="form.amount"
                placeholder="最大盲注金额"
              />
            </nut-form-item> -->
            <div class="play_mode">
              <label class="play_mode_label">盲注</label>
              <div class="play_mode_container">
                <div
                  v-for="mode in modes5"
                  :key="mode.label"
                  class="play_mode_item"
                  :class="{ 'play_mode_item--active': selectedMode5 === mode.label }"
                  @click="selectMode5(mode)"
                >
                  <p>{{ mode.label }}</p>
                  <p>{{ mode.name }} {{mode.label == '全部' ? '' : '以内' }}</p>
                </div>
              </div>
            </div>

            <!-- 每桌人数上限 -->
            <div class="play_mode">
              <label class="play_mode_label">每桌人数上限</label>
              <div class="play_mode_container">
                <div
                  v-for="mode in modes"
                  :key="mode.label"
                  class="play_mode_item"
                  :class="{ 'play_mode_item--active': selectedMode === mode.label }"
                  @click="selectMode(mode)"
                >
                  <span>{{ mode.label }}</span>
                </div>
              </div>
            </div>

            <!-- 开局盲注数量 -->
            <div class="play_mode1">
              <label class="play_mode_label">开局盲注数量</label>
              <div class="play_mode_container">
                <div
                  v-for="mode in modes1"
                  :key="mode.label"
                  class="play_mode_item"
                  :class="{ 'play_mode_item--active': selectedMode1 === mode.label }"
                  @click="selectMode1(mode)"
                >
                  <span>{{ mode.label }}</span>
                </div>
              </div>
            </div>

            <!-- 限注规则 -->
            <div class="play_mode1">
              <label class="play_mode_label">限注规则</label>
              <div class="play_mode_container">
                <div
                  v-for="mode in modes2"
                  :key="mode.label"
                  class="play_mode_item"
                  :class="{ 'play_mode_item--active': selectedMode2 === mode.label }"
                  @click="selectMode2(mode)"
                >
                  <span>{{ mode.label }}</span>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <!-- 房间带入模式 -->
            <!-- <nut-form-item class="yh_item1" label="房间带入模式">
              <div class="play_mode">
                <div class="play_mode_container">
                  <div
                    v-for="mode in modes3"
                    :key="mode.label"
                    class="play_mode_item"
                    :class="{ 'play_mode_item--active': selectedMode3 === mode.label }"
                    @click="selectMode3(mode)"
                  >
                    <span>{{ mode.label }}</span>
                  </div>
                </div>
              </div>
              <div class="play_amount">
                <nut-input
                  v-model.trim="form.amount"
                  placeholder="最小盲注金额"
                />
                <span>至</span>
                <nut-input
                  v-model.trim="form.amount"
                  placeholder="最大盲注金额"
                />
              </div>
              
            </nut-form-item> -->
            <div class="play_mode">
              <label class="play_mode_label">房间带入模式</label>
              <div class="play_mode_container">
                <div
                  v-for="mode in modes5"
                  :key="mode.label"
                  class="play_mode_item"
                  :class="{ 'play_mode_item--active': selectedMode5 === mode.label }"
                  @click="selectMode5(mode)"
                >
                  <p>{{ mode.label }}</p>
                  <p>{{ mode.name }} {{mode.label == '全部' ? '' : '以内' }}</p>
                </div>
              </div>
            </div>

            <!-- 房间底注 -->
            <!-- <nut-form-item class="yh_item" label="房间底注">
              <nut-input
                v-model.trim="form.amount"
                placeholder="最小金额"
              />
              <span>至</span>
              <nut-input
                v-model.trim="form.amount"
                placeholder="最大金额"
              />
            </nut-form-item> -->
            <div class="play_mode">
              <label class="play_mode_label">房间底注</label>
              <div class="play_mode_container">
                <div
                  v-for="mode in modes5"
                  :key="mode.label"
                  class="play_mode_item"
                  :class="{ 'play_mode_item--active': selectedMode5 === mode.label }"
                  @click="selectMode5(mode)"
                >
                  <p>{{ mode.label }}</p>
                  <p>{{ mode.name }} {{mode.label == '全部' ? '' : '以内' }}</p>
                </div>
              </div>
            </div>

            <!-- 输赢规则 -->
            <div class="play_mode1">
              <label class="play_mode_label">输赢规则</label>
              <div class="play_mode_container">
                <div
                  v-for="mode in modes4"
                  :key="mode.label"
                  class="play_mode_item"
                  :class="{ 'play_mode_item--active': selectedMode4 === mode.label }"
                  @click="selectMode4(mode)"
                >
                  <span>{{ mode.label }}</span>
                </div>
              </div>
            </div>

            <!-- 每桌人数上限 -->
            <div class="play_mode">
              <label class="play_mode_label">每桌人数上限</label>
              <div class="play_mode_container">
                <div
                  v-for="mode in modes"
                  :key="mode.label"
                  class="play_mode_item"
                  :class="{ 'play_mode_item--active': selectedMode === mode.label }"
                  @click="selectMode(mode)"
                >
                  <span>{{ mode.label }}</span>
                </div>
              </div>
            </div>
          </template>
          <!-- 按钮 -->
          <div class="btn_zone flex">
            <nut-button
              class="submit_btn button_color pointer"
              :disabled="loading"
              block
              @click="onSubmit"
            >
              提交
            </nut-button>
          </div>  
        </nut-form>
      </div>
    </nut-popup>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const props: any =  defineProps({
  isPopup: {
    type: Boolean,
    default: false,
  },
  close: {
    type: Function,
    required: true,
  },
  isType: {
    type: Number,
    default: 1
  }
});

// const dataParams = {
//   // country: 1,
//   method: -1,
//   discount: 1,
//   amount: '',
//   bank: null,
//   bankMethod: 100, 
//   network_type: "", 
// };

// const form = ref(
//   // 存款表单提交
//   { ...dataParams }
// );

// 默认选中桌人数
const selectedMode5 = ref('全部');
// 桌人数
const modes5 = ref([
  { label: '全部', name: '不限', enabled: true },
  { label: '微', name: '10', enabled: true },
  { label: '小', name: '50', enabled: true },
  { label: '中', name: '100', enabled: true },
  { label: '大', name: '200', enabled: true },
]);

const selectMode5 = (mode: { label: string; enabled: boolean }) => {
  if (!mode.enabled) {
    return;
  }
  selectedMode5.value = mode.label;
};


// 默认选中桌人数
const selectedMode = ref('全部');
// 桌人数
const modes = ref([
  { label: '全部', enabled: true },
  { label: '6', enabled: true },
  { label: '9', enabled: true },
]);

// 点击选择桌人数
const selectMode = (mode: { label: string; enabled: boolean }) => {
  if (!mode.enabled) {
    return;
  }
  selectedMode.value = mode.label;
};

const selectedMode1 = ref('全部');
const modes1 = ref([
  { label: '全部', enabled: true },
  { label: '1小盲+1大盲+1随机大盲注', enabled: true },
  { label: '1小盲+1大盲+每人1大盲', enabled: true },
  { label: '1小盲+1大盲', enabled: true },
]);
const selectMode1 = (mode: { label: string; enabled: boolean }) => {
  if (!mode.enabled) {
    return;
  }
  selectedMode1.value = mode.label;
};

const selectedMode2 = ref('全部');
const modes2 = ref([
  { label: '全部', enabled: true },
  { label: '限注', enabled: true },
  { label: '底池限注', enabled: true },
  { label: '无限限注', enabled: true },
]);
const selectMode2 = (mode: { label: string; enabled: boolean }) => {
  if (!mode.enabled) {
    return;
  }
  selectedMode2.value = mode.label;
};

// const selectedMode3 = ref('最低带入金额');
// const modes3 = ref([
//   { label: '最低带入金额', enabled: true },
//   { label: '固定带入金额', enabled: true },
// ]);
// const selectMode3 = (mode: { label: string; enabled: boolean }) => {
//   if (!mode.enabled) {
//     return;
//   }
//   selectedMode3.value = mode.label;
// };


const selectedMode4 = ref('全部');
const modes4 = ref([
  { label: '全部', enabled: true },
  { label: '1小盲+1大盲+1随机大盲注', enabled: true },
  { label: '1小盲+1大盲+每人1大盲', enabled: true },
  { label: '1小盲+1大盲', enabled: true },
]);
const selectMode4 = (mode: { label: string; enabled: boolean }) => {
  if (!mode.enabled) {
    return;
  }
  selectedMode4.value = mode.label;
};


const loading = ref(false); // 是否提交中

const closedOverlay = () => {
  props.close();
}

const onSubmit = () => {
  handleSubmit();
};

const handleSubmit = () => {

}
</script>

<style scoped lang="scss">
.filter_box {
  .body {
    padding: 0 14px;

    form {
      :deep(.nut-cell-group__wrap) {
        box-shadow: none;
        background: none;
        margin: 0;

        .nut-cell {
          background: none;
          padding: 0 !important;
          margin-bottom: 16px;
          &.last_item {
            margin-bottom: 10px;
            .h {
              margin-bottom: 10px;
            }
          }
          &::after {
            border: none;
          }

          &.nut-form-item {
            .nut-form-item__label {
              padding-bottom: 8px;
              color: #fff;
              font-size: 14px;
              // font-weight: 500;
            }
            .nut-input,
            .select_dis {
              width: 100%;
              background: #1d1c3c;
              border: 1px solid #333260;
              box-shadow: 0.5px 0.5px 1px 0 #333260 inset;
              border-radius: 8px;
              padding: 9px 10px;

              .s-icon {
                width: 24px;
                height: 24px;
                background: url(/imgs/inputSuffix.webp) center no-repeat;
                background-size: 100%;
                transition: 0.3s;
              }

              &.active {
                .s-icon {
                  transform: rotate(180deg);
                }
              }
              .nut-menu__title-text {
                padding: 0;
              }
            }

            .usdt_box {
              justify-content: space-between;
              margin-top: 10px;

              .button {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }

  .body_sec {

    .yh_item {
      :deep(.nut-form-item__body__slots) {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .nut-input{
          width: 120px !important;
        }
      }
    }
    .yh_item1 {
      :deep(.nut-form-item__body__slots) {
        .play_mode {
      // margin-top: 20px;

          .play_mode_label {
            display: block;
            margin-bottom: 10px;
            color: #fff;
            font-size: 14px;
          }

          .play_mode_container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 24px;
          }

          .play_mode_item {
            width: calc(50% - 5px);
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 8px;
            background: #1D1C3C;
            box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
            font-size: 14px;
            color: #fff;
            font-size: 14px;
            font-weight: 400;
            position: relative;
            flex: 0 0 calc(50% - 5px);

            &--active {
              background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%), var(---, #1D1C3C);
              box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
              color: #fff;
            }
          }
        }
        .play_amount {
          display: flex;
          justify-content: space-around;
          align-items: center;
        }

        .nut-input{
          width: 120px !important;
        }
      }
    }
    .play_mode {
      // margin-top: 20px;

      .play_mode_label {
        display: block;
        margin-bottom: 10px;
        color: #fff;
        font-size: 14px;
      }

      .play_mode_container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 24px;
      }

      .play_mode_item {
        width: calc(33.33% - 10px);
        height: 40px;
       
        text-align: center;
        border-radius: 8px;
        background: #1D1C3C;
        box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
        font-size: 14px;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        position: relative;
        flex: 0 0 calc(33.33% - 10px);

        p:nth-child(1) {
          margin-top: 4px;
        }
        p:nth-child(2) {
          color: #A8A8CA;
        }
        span {
          line-height: 40px;
        }
        &--active {
          background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%), var(---, #1D1C3C);
          box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
          p {
            color: #fff !important;
          }
        }
      }
    }

    .play_mode1 {
      // margin-top: 20px;

      .play_mode_label {
        display: block;
        margin-bottom: 10px;
        color: #fff;
        font-size: 14px;
      }

      .play_mode_container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 24px;
      }

      .play_mode_item {
        min-width: calc(33.33% - 10px);
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 8px;
        background: #1D1C3C;
        box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
        font-size: 14px;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        position: relative;
        padding:  0 8px;

        &--active {
          background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%), var(---, #1D1C3C);
          box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
          color: #fff;
        }
      }
    }

    .btn_zone {
      // position: fixed;
      // bottom: 38px; 
      // left: 26px;
      .submit_btn {
        margin: 32px auto 8px;
        border: 0;
        width: 248px;
        height: 44px;
        color: #fff;
        border-radius: 8px;

        &.fixed_bg {
          background-size: 100% 112%;
        }
      }
    }
  }
  :deep(.nut-popup) {
    background: #100E26;

    .game_title {
      margin: 40px 0 12px 14px;
      img {
        width: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: top;
      }
      span {
        color: #FFF;
        text-align: center;
        font-family: "PingFang SC";
        font-size: 16px;
        font-weight: 600;
      }
    }
  }
}

</style>